<template>
  <div>
    <h3>welcome</h3>
    <button @click="isShow = !isShow">显示、隐藏</button>
    <transition-group name="animate__animated animate__bounce"
                      enter-active-class="animate__wobble"
                      leave-active-class="animate__tada">
      <h1 v-if="isShow"
          key="1">你好</h1>
      <h1 v-if="isShow"
          key="2">hello</h1>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: 'welcome',
  data () {
    return {
      isShow: true
    }
  }
}
</script>
<style scoped>
h1 {
  background: orange;
  width: 200px;
}
</style>
